<template>
  <div class="medical">
    <span class="siwtch">
      <span @click="handleChange(1)" :class="switchChange ? 'active' : ''">医生</span>
      <span @click="handleChange(2)" :class="switchChange ? '' : 'active'">护士</span>
    </span>
    <section class="cards">
      <template v-if="switchChange">
        <DoctorCard
          v-for="item in doctorOrNurseData"
          :key="item.id"
          :info="item"
          :flag="curShowFlag"
        />
      </template>
      <template v-else>
        <DoctorCard
          v-for="item in doctorOrNurseData"
          :key="item.id"
          :info="item"
          :flag="curShowFlag"
        />
      </template>
    </section>
  </div>
</template>

<script setup>
import DoctorCard from "./compoennt/doctorCard.vue";
import { get_doctorAndNurseList } from "@/apis/medicalStyle.js";
import { ref } from "vue";

let switchChange = ref(true); //切换控制
let curShowFlag = ref(1); //当前显示标识 1:医生 2:护士
//医生或护士列表
let doctorOrNurseData = ref([
  {
    deptCode: "",
    deptName: "",
    id: "",
    jobName: null,
    jobNumber: "6660",
    jobTitle: null,
    name: "",
    phone: null,
  },
]);
//获取医生护士数据
async function getDoctorAndNurseData() {
  let res = await get_doctorAndNurseList({ type: curShowFlag.value });
  doctorOrNurseData.value = res.rows;
}
getDoctorAndNurseData();

//医生护士切换
function handleChange(flag) {
  if (curShowFlag.value === flag) return;
  switchChange.value = !switchChange.value;
  curShowFlag.value = flag;
  getDoctorAndNurseData();
}


</script>

<style lang="scss" scoped>
.medical {
  height: 100%;
  overflow-y: auto;
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  .siwtch {
    border: 2px solid #fff;
    display: inline-block;
    padding: 2px;
    span {
      display: inline-block;
      padding: 8px 12px;
      cursor: pointer;
    }
    .active {
      background: #fff;
      color: #1685ff;
    }
  }
  .cards {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: auto;
    grid-gap: 1.5vh;
  }
}
.medical::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}
</style>
